//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//引入首页样式
require('./home.less')

//引入swiper
const mySwiper = require('swiper')

//引入swiper的css
require('swiper/dist/css/swiper.min.css')

//获取axios工具函数
const request = require('../../../utils/request')

//引入tabbar渲染函数
const renderTabbar = require('../../../utils/tabbar')

//等待dom加载完毕之后操作dom
window.onload=()=>{
    // 渲染tabbar
    renderTabbar()

    // 获取dom 
    let rankNo=document.querySelector("#rankNo")
    let clockDay=document.querySelector("#clockDay")
    let clock=document.querySelector("#clock")
    let badge=document.querySelector("#badge")
    //使用swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 2000, //可选选项，自动滑动
        pagination: '.swiper-pagination', //分页器
        loop: true, //无限循环
    })

    // 获取打卡信息
    function getClockInfo(){
        request.get('/api/user/clockInInfo')
        .then(res => {
        // console.log('ClockInfo :>> ', res.data)

        // 这里要设置点击切换已打卡和今日打卡
        // 解构
        let{errno,data}=res.data
        // 判断
        if(errno===0){
            console.log('data.isClockIn :>> ', data.isClockIn)
            // 判断为0的时候显示已打卡
            if (data.isClockIn) {
                clock.textContent = '已打卡'
                clock.className = 'clocked'
              } else {
                clock.textContent = '今日打卡'
                clock.className = 'clock'
              }

        }
        
    })
    }
    getClockInfo()

    // 获取用户信息
    function getUserTnfo(){
        request.get('/api/user/info')
        .then(res=>{
            // console.log('UserTnfo :>> ', res.data)

            // 解构数据
            let{errno,data}=res.data
            // 判断
            if(errno===0){
                // 业务逻辑
                 read(data)
            }

        })
    }

    // 渲染数据
    function read(data){

        // 渲染dom更新dom
        rankNo.textContent = data.ranking
        clockDay.textContent = data.clockCount
        badge.textContent = data.badges
    }

    getUserTnfo()    
    

    // 点击打卡事件
    clock.addEventListener('click',function(){
        request.post('/api/user/clockIn')
        .then(res=>{
            // 解构
            let{errno,message}=res.data
            // 判断
            if(errno===0){
                // 打卡成功的话 请求数据渲染
                getClockInfo()
                getUserTnfo() 
            }else{
                alert(message)
            }
        })
    })
}